<template>
  <div v-if="form" class="full-box shadow-box padding-box">
    <OperateCommon :showBack="true" @back="goBack">
      <template #operate>
        <el-button
          type="primary"
          :disabled="
            parseInt(form.red_solve_status) != 0 &&
            parseInt(form.red_solve_status) != 15
          "
          @click="assign"
          >交办</el-button
        >
      </template>
    </OperateCommon>
    <div class="c-form-padding">
      <div style="margin-bottom: 10px" v-if="form.red_solve_status == 15">
        <el-alert type="error" effect="light" show-icon :closable="false">
          <template #title> 退回原因【{{ rejectReason.dept }}】 </template>
          <template>
            <div>{{ rejectReason.desc }}</div>
          </template>
        </el-alert>
      </div>
      <div class="generate-form">
        <el-form
          :model="form"
          ref="form"
          :rules="rules"
          label-width="180px"
          :inline="false"
        >
          <el-form-item label="预警项目" prop="">
            <el-input
              v-model="form.object_name"
              placeholder=""
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="建设单位" prop="">
            <el-input
              v-model="form.responsible_name"
              placeholder=""
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="预警单位" prop="">
            <el-input
              v-model="form.dept_name"
              placeholder=""
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="预警发生时间" prop="">
            <el-date-picker v-model="form.trigger_time" type="date" disabled>
            </el-date-picker>
          </el-form-item>
          <el-form-item label="预警节点" prop="">
            <el-input v-model="form.scene" placeholder="" disabled></el-input>
          </el-form-item>
          <el-form-item label="预警内容" prop="">
            <el-input
              type="textarea"
              v-model="form.warning_content"
              placeholder=""
              disabled
              :autosize="{
                minRows: 3,
                maxRows: 6,
              }"
            ></el-input>
          </el-form-item>
          <el-form-item label="预警监控点" prop="">
            <el-input
              type="textarea"
              v-model="form.description"
              placeholder=""
              disabled
              :autosize="{
                minRows: 1,
                maxRows: 3,
              }"
            ></el-input>
          </el-form-item>
          <el-form-item label="附件">
            <template v-if="form.fileList">
              <ul class="alert-file">
                <li
                  v-for="(item, index) in form.fileList"
                  :key="index"
                  @click="openFile(item)"
                >
                  {{ item.name }}
                </li>
              </ul>
            </template>
            <template v-if="!form.fileList">无</template>
          </el-form-item>
          <el-form-item label="承办单位" prop="undertake_dept_id">
            <!-- <DeptCascader
              :options="dept"
              :defaultChecked.sync="form.undertake_dept_id"
              @change="changeUndertakeDept"
            >
            </DeptCascader> -->
            <el-select
              v-model="form.undertake_dept_id"
              value-key=""
              placeholder=""
              filterable
            >
              <el-option
                v-for="item in dept"
                :key="item.id"
                :label="item.dept_name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="交办意见" prop="assign_opinion">
            <el-input
              type="textarea"
              v-model="form.assign_opinion"
              placeholder=""
              :autosize="{
                minRows: 3,
                maxRows: 6,
              }"
            ></el-input>
          </el-form-item>
          <el-form-item label="附件材料" prop="">
            <CommonUpload
              tableName="red-alert-assign"
              :useType="1"
            ></CommonUpload>
          </el-form-item>

          <el-form-item label="交办单位" prop="">
            <el-input
              style="width: 215px"
              v-model="form.assign_dept_name"
              placeholder=""
              disabled
            ></el-input>

            <!-- <DeptCascader
              disabled
              :options="dept"
              :defaultChecked.sync="form.assign_dept_name"
              @change="changeAssignDept"
            >
            </DeptCascader> -->
          </el-form-item>
          <el-form-item label="交办时间" prop="">
            <el-date-picker
              v-model="form.assign_time"
              type="date"
              value-format="yyyy-MM-dd"
              disabled
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import OperateCommon from "@/components/Common/OperateCommon.vue";
import LinkTo from "@/mixins/LinkTo";
import {
  getRedAlerAssignDetail,
  getUndertakeDept,
  postRedAlerAssignDetails,
} from "@/api/RedAlert/Index";
import DeptCascader from "@/components/Common/DeptCascader.vue";
import { getCurrentDate } from "@/utils/date";
import CommonUpload from "@/components/Common/CommonUpload.vue";
import uploadMixin from "@/components/GenerateForm/uploadMixin";
import { required } from "@/utils/eValidate";
import axios from "axios";

export default {
  name: "RedAlertAssignForm",
  mixins: [LinkTo, uploadMixin],
  components: { OperateCommon, DeptCascader, CommonUpload },
  data() {
    return {
      id: 0,
      pageType: 0,
      uploadUrl: upload_url,
      form: {
        scene: "",
        undertake_dept_id: "",
        undertake_dept_name: "",
        warning_content: "",
        warning_dept_id: "",
        warning_dept_name: "",
      },
      rules: {
        undertake_dept_id: [required],
        assign_opinion: [required],
      },
      dept: [],
      rejectReason: {
        dept: "",
        desc: "",
      },
    };
  },
  methods: {
    initDept() {
      //   getDeptTree().then((res) => {
      //     if (res.code == 0) {
      //       this.dept = res.data;
      //     }
      //   });
      getUndertakeDept().then((res) => {
        if (res.code == 0) {
          this.dept = res.data;
        }
      });
    },
    initData() {
      getRedAlerAssignDetail({ id: this.id }).then((res) => {
        if (res.code == 0) {
          // Object.assign(this.form, res.data);
          this.form = res.data;
          this.form.scene = this.form.scene + " / " + this.form.sub_scene;
          this.form.assign_time = getCurrentDate();

          if (this.form.red_solve_status == 15) {
            this.rejectReason.dept = this.form.undertake_dept_name;
            this.rejectReason.desc = this.form.feedback;
          }

          this.$nextTick(() => {
            this.$refs.form.clearValidate();

            this.form.assign_dept_name = JSON.parse(
              localStorage.getItem("user")
            ).dept_name;
          });
        }
      });
    },
    changeUndertakeDept(val) {
      this.form.undertake_dept_id = val.value;
      this.form.undertake_dept_name = val.label;
    },
    changeAssignDept(val) {
      this.form.undertake_dept_id = val.value;
      this.form.undertake_dept_name = val.label;
    },
    assign() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.warning_id = this.form.id;

          this.form.undertake_dept_name = this.dept.filter((i) => {
            if (i.id == this.form.undertake_dept_id) {
              return i;
            }
          })[0].dept_name;

          delete this.form.id;
          postRedAlerAssignDetails(this.form).then((res) => {
            if (res.code == 0) {
              this.$message.success("交办成功");
              this.checkFile(res.data);
              this.linkTo("/redAlert/alertAssignList");
            }
          });
        }
      });
    },
    openFile(item) {
      axios
        .get(this.uploadUrl + item.url, {
          headers: {
            token: localStorage.getItem("token"),
          },
          responseType: "blob",
        })
        .then((response) => {
          window.open(window.URL.createObjectURL(response), "_blank");
        });
    },
    goBack() {
      switch (parseInt(this.pageType)) {
        case 0:
          this.linkTo(`/home`);
          break;
        case 1:
          this.linkTo(`/redAlert/alertAssignList`);
          break;
        default:
          break;
      }
    },
  },
  created() {
    this.id = this.$route.params.id;
    this.pageType = this.$route.params.type;

    this.initDept();

    if (this.id > 0) {
      this.initData();
    }
  },
};
</script>

<style lang="scss" scoped>
.generate-form {
  box-sizing: border-box;
  padding: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
}
.alert-file {
  margin: 0;
  padding: 0;
  list-style: none;
  > li {
    &:hover {
      cursor: pointer;
      background-color: rgb(236, 245, 255);
    }
  }
}
</style>